<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>收藏夹</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/toastr.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <style>
        body {
            font-size: 14px;
        }

        footer.aui-nav {
            z-index: 99999;
        }

        header.aui-bar {
            background: #fff;
        }

        .aui-title {
            color: #000;
        }

        .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p {
            color: #ff3333 !important;
        }

        .active {
            color: #ff3333 !important;
        }

        .aui-tab-nav li.active {
            color: #ff3333;
            border-bottom: 2px #ff3333 solid;
        }

        .aui-bar .aui-iconfont {
            color: #000;
        }

        .contain {
            padding-top: 10px;
            background: #f3f3f3;
        }

        .bigPic .divPrice {
            color: #ec2e2e;
            font-weight: bold;
            text-align: left;
            padding-left: 10px !important;
            font-size: 14px;
        }

        .bigPic .divBuy {
            text-align: right;
            padding-right: 10px !important;
            color: #327afa;
            /*font-weight: bold;*/
            font-size: 12px;
            float: right !important;
        }

        .bigPic .divPrice, .divBuy {
            padding: 5px;
            overflow: hidden;
        }

        .aui-ellipsis-2 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .aui-list-view-cell {
            border-radius: 2px;
        }

        /*//一行两列样式*//**/
        .bigPic.aui-list-view.aui-grid-view {
            padding: 0 !important;
            background: #f3f3f3;
        }

        .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 0 !important;
        }

        .bigPic .aui-col-xs-6:nth-of-type(2n+1) {
            margin-right: 1%;
        }

        .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            margin: 0 0 0 5px;
            margin-bottom: 1px;
            text-align: left;
            height: 50px;
        }

        .bigPic li {
            background: #fff !important;
            margin-bottom: 8px;
        }

        .bigPic .aui-col-xs-6 {
            width: 49.5%;
        }

        .bigPic .line {

        }

        .stockCount {
            width: 100%;
            overflow: hidden;
            height: 25px;
            line-height: 25px;
            color: #000;
            font-size: 12px;
            text-align: left;
            margin-left: 5px;
            color: #9c9c9c;
        }

        .proPic {
            position: relative;
            font-size: 12px;
        }

        .proPic img {
            display: block;
        }

        .cancelCollection span {
            color: #a2a2a2;
            padding: 5px;
            overflow: hidden;
            display: block;
            font-size: 14px;
            margin-right: 5px;
        }

        /*商家收藏*/
        .aui-img-body {
            height: 60px;
            line-height: 60px;
        }

        .sellerCollection .aui-list-view:after {
            border: none;
        }

        .aui-list-view.aui-in .aui-list-view-cell:after {
            left: 0;
        }

        .sellerCollection .aui-list-view-cell {
            padding: 5px 15px;
        }

    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-border-b">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        收藏夹
    </div>
</header>

<div class=" contain">
    <div class="wrapper">
        <div id="scroller-pullDown">
                <span class="aui-iconfont aui-icon-refresharrow downIcon">
                </span>
            <span id="pullDown-msg" class="pull-down-msg ">下拉刷新</span>
        </div>
        <div class="proCollection">
            <ul class="aui-list-view aui-grid-view bigPic">
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-col-xs-6">
                    <div class="proPic">
                        <img class="aui-img-object" src="../../image/pro.png">
                    </div>
                    <div class="proInfo">
                        <div class="aui-img-body  aui-ellipsis-2">
                            图文列表图文列表图文列表图文列表
                        </div>
                        <div class="aui-border-b line"></div>
                        <div class="divPrice aui-pull-left">
                            ￥<span class="price ">5555.0</span>
                        </div>
                        <div class=" aui-pull-right cancelCollection">
                            <span>取消收藏</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="scroller-pullUp">
            <i class="aui-iconfont aui-icon-refresharrow upIcon"></i>
            <span id="pullUp-msg" class="pull-up-msg"> 上拉刷新</span>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/toastr.js"></script>
<script type="text/javascript" src="../../script/iscroll2.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">

    $(function () {
//        垂直滚动
        scrollV();
    })
    //    垂直滚动
    //下拉刷新
    function scrollV() {
        $(".contain").height($("body").height()-$("header").innerHeight()-10);
        myScrollV=new IScroll(".contain",{
            probeType:3,
            click:true
        })

        if(myScrollV.maxScrollY<0){
            $("#scroller-pullUp").css({"display":"block"})
        }
        var upIcon = $(".downIcon"),
            downIcon = $(".upIcon");
        myScrollV.on("scroll",function(){
            var y = this.y,
                maxY = this.maxScrollY - y,
                downHasClass = downIcon.hasClass("reverse_icon"),
                upHasClass = upIcon.hasClass("reverse_icon");
            if(y >= 40 && !downHasClass){
                $(".downIcon").addClass("turnUp");
                downIcon.addClass("reverse_icon");
                $(".pull-down-msg").text("松手刷新");
                return "";
            }else if(y < 5 && downHasClass){
                $(".downIcon").removeClass("turnUp");
                downIcon.removeClass("reverse_icon");
                $(".pull-down-msg").text("下拉刷新");
                return "";
            }

            if(maxY >= 40 && !upHasClass){
                $(".upIcon").addClass("turnDown");
                upIcon.addClass("reverse_icon");
                $(".pull-up-msg").text("松手刷新");
                return "";
            }else if(maxY < 5 && upHasClass){
                $(".upIcon").removeClass("turnDown");
                upIcon.removeClass("reverse_icon");
                $(".pull-up-msg").text("上拉刷新");
                return "";
            }
        });

        myScrollV.on("slideDown",function(){
            //下拉刷新
            if(this.y > 40){
                //添加数据

                myScrollV.refresh();
                toastr.success("下拉数据加载成功");
            }
        });

        myScrollV.on("slideUp",function(){
            //上拉刷新
            if(this.maxScrollY - this.y > 40){
                //添加数据
                myScrollV.refresh();
                toastr.success("上拉数据加载成功");
            }
        });

    }

    $(document).on("click",".cancelCollection",function () {
        var $this=$(this);
        mui.confirm("确定取消收藏？","",["是","否"],function (e) {
            if(e.index==0){
                $this.parents("li").remove();
                toastr.success("操作成功！");
                myScrollV.refresh();
            }
        })
    })
</script>
</html>
